<%--
  Created by IntelliJ IDEA.
  User: tianyu
  Date: 2023/7/2
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户列表页面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link rel="stylesheet" href="./css/fileinput.min.css">

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <!-- jsp= html + servlet -->
   <script src="./js/fileinput.min.js"></script>

    <style>
        th,td{ text-align: center}
    </style>
</head>
<body class="bg-success">
<!-- https://v3.bootcss.com/getting-started/ -->

<!-- 导航  开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">xxxx商品后台管理</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown">
                            <a href="login.html" class="dropdown-toggle" ><%--data-toggle="dropdown"--%>
                                首页
                                <b class="caret"></b>
                            </a>

                        </li>
                        <li class="dropdown">
                            <a href="user.jsp" class="dropdown-toggle" >用户管理</a>
                        </li>
                        <li class="dropdown">
                            <a href="goods.jsp" class="dropdown-toggle" >商品管理</a>
                        </li>
                        <li class="dropdown">
                            <a href="orders.jsp" class="dropdown-toggle" >订单管理</a> <%--data-toggle="dropdown"--%>
                        </li>
                    </ul>
                    <!--向右对齐 -->
                    <ul class="nav navbar-nav navbar-right">
                            <%--显示登录用户--%>
                        <li class="dropdown">
                        <a href="#" class="dropdown-toggle">
                        <li class="dropdown"><%=session.getAttribute("username")%></li>
                        </a>
                        </li>
                        <li class="dropdown">
                            <a href="/Test/logout" class="dropdown-toggle">
                                退出 <b class="caret"></b>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="col-md-1"></div>
</div>
<!-- 导航  结束 -->

<!--搜索框和添加按钮部分 开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-addon">账号：</span>
                    <input type="text" class="form-control" placeholder="请输入搜索账号" id="searchname">
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-default" onclick="userList(1,5)">搜索</button>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
<!--搜索框和添加按钮部分 结束 -->
<br>

<!--表格部分  开始 -->
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10  center-block">
        <table class="table table-striped table-bordered table-hover">
            <!-- <caption>基本的表格布局</caption> -->
            <thead>
            <tr>
                <th>序号</th>
                <th>账号</th>
                <th>密码</th>
                <th>头像</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            <tr>
                <td>1</td>
                <td>Bangalore</td>
                <td>Bangalore</td>
                <td><button  type="button" class="btn btn-warning btn-xs"data-toggle="modal" data-target="#myModal2">修改</button>
                    <!-- 表示一个危险的或潜在的负面动作 -->
                    <button onclick="del('+i+')" type="button" class="btn btn-danger btn-xs">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Mumbai</td>
                <td>Mumbai</td>
                <td>
                    <button  type="button" class="btn btn-warning btn-xs"data-toggle="modal" data-target="#myModal2">修改</button>
                    <!-- 表示一个危险的或潜在的负面动作 -->
                    <button onclick="del('+i+')" type="button" class="btn btn-danger btn-xs">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <!-- 分页开始-->
        <ul class="pagination" style="margin-left: 35%" id="fy">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
        <!-- 分页结束-->

    </div>
    <div class="col-md-1"></div>
</div>
<!--表格部分  结束 -->

<!--添加的模态框 开始 -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:30%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <%--<div class="form-group">
                    <label for="id">ID</label>
                    <input type="text" class="form-control" id="id" placeholder="请输入ID">
                </div>--%>
                <div class="form-group">
                    <label for="username">账号</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="text" class="form-control" id="password" placeholder="请输入密码">
                </div>

                    <div class="form-group">
                        <label for="avatar">头像</label>
                        <input type="file" class="form-control uploadImg" >
                        <input type="hidden" id="avatar" placeholder="请输入头像">
                    </div>
                    <div class="form-group">
                        <label for="createdate">注册时间</label>
                        <input type="date" class="form-control" id="createdate" placeholder="请输入注册时间">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addUser()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--添加的模态框 结束 -->

<!--修改的模态框 开始 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:30%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel2">编辑用户</h4>
            </div>
            <div class="modal-body">
               <%-- <div class="form-group">
                    <label for="id">ID</label>--%>
                 <%-- input type=hidden 我们称为隐藏域--%>
                    <input type="hidden" class="form-control" id="id2" placeholder="请输入ID">
               <%-- </div>--%>
                <div class="form-group">
                    <label for="username">账号</label>
                    <input type="text" class="form-control" id="username2" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="text" class="form-control" id="password2" placeholder="请输入密码">
                </div>

                   <div class="form-group">
                       <label for="avatar">头像</label>
                       <input type="file" class="form-control uploadImg" >
                       <input type="hidden" id="avatar2" placeholder="请输入头像">
                   </div>
                   <div class="form-group">
                       <label for="createdate">注册时间</label>
                       <input type="date" class="form-control" id="createdate2" placeholder="请输入注册时间">
                   </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateUser()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--修改的模态框 结束 -->
</body>
<script src="./js/upload.js"></script>


<script>
    //列表渲染
    var pageIndex=1;//第几页
    var pageSize=5;//每页几条
    userList(pageIndex,pageSize);
    function  userList(pageIndex,pageSize)
    {
        //获取搜索框的内容
        var searchname=$("#searchname").val();

        var obj={}//定义一个对象
      //获取搜索的名称

        //组装数组
        obj.search=null;
        obj.pageIndex=pageIndex;
        obj.pageSize=pageSize;

        $.ajax
        (
            {
                url:"/Test/getUsers",//请求路径
                //data:JSON.stringify(obj),//请求数据
                data:{
                    searchname:searchname,
                    pageIndex:pageIndex,
                    pageSize: pageSize
                },
                type:"GET",//请求方式
               /* dataType:"json",//请求数据类型
                contentType:"application/json",//返回数据类型*/
                success:function (data)
                {
                    console.log(data);
                    data=JSON.parse(data);
                   /* //数据本地存储
                    var users=localStorage.getItem("userList");//获取本地存储的数据
                    if(users)
                    {
                        //有数据则为 true
                        users=JSON.parse(users);//把json格式字符串转为json数据
                        data.data=users;
                        localStorage.setItem("userList",JSON.stringify(users));//数据本地存储
                    }
                    else
                    {
                        localStorage.setItem("userList",JSON.stringify(data.data));//数据本地存储
                    }*/

                     //渲染表格
                    var html="";
                    var count= data.count;//总条数
                    data=data.data;
                    data.forEach((e,i)=>{
                        html+='<tr>'+
                        '<td>'+e.id+'</td>'+
                        '<td>'+e.username+'</td>'+
                        '<td>'+e.password+'</td>'+
                                '<td><img src="'+e.avatar+'" width="80"></td>'+
                                '<td>'+e.createdate+'</td>'+
                        '<td>'+'<button onclick="getUser('+e.id+')" type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal2">修改</button>'+
                            '<button onclick="del('+e.id+')" type="button" class="btn btn-danger btn-xs">删除</button>'
                            +'</td>'+
                            '</tr>'
                    })
                    $("#tb").html(html);

                    //渲染分页
                    var fyhtml='<li><a onclick="userList('+(pageIndex-1>0?pageIndex-1:1)+','+pageSize+')" href="#">&laquo;</a></li>';
                    //调用Math.ceil()向上取整  2.1=3  2.5=3
                    var page= Math.ceil(count/pageSize);
                    for(var i=1;i<=page;i++){
                        fyhtml +=' <li><a onclick="userList('+i+','+pageSize+')" href="#">'+i+'</a></li>';
                    }
                    fyhtml += ' <li><a onclick="userList('+(pageIndex+1>=page?page:(pageIndex+1))+','+pageSize+')" href="#">&raquo;</a></li>';
                    $("#fy").html(fyhtml);

                }
            }
        )
    }

    //添加用户
    function addUser() {
        // 获取输入框的值
        //var id = $("#id").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var avatar = $("#avatar").val();
        var createdate = $("#createdate").val();

       /* // 判断不能为空
        if (!id) {
            alert("ID不能为空！")
            return;
        }*/
        if (!username) {
            alert("账号不能为空！")
            return;
        }
        if (!password) {
            alert("密码不能为空！")
            return;
        }
        if (!avatar) {
            alert("头像不能为空！")
            return;
        }
        if (!createdate) {
            alert("注册不能为空！")
            return;
        }

        //组装数据
        var obj = {}
        //obj.id = id;
        obj.username = username;
        obj.password = password;
        /* var users=localStorage.getItem("userList");//获取本地存储的数据
         users=JSON.parse(users);
         users.push(obj);//数据添加到数组里面
         localStorage.setItem("userList",JSON.stringify(users));//数组的
         userList(1,5);
         $("#myModal").modal("hide");//模态框隐藏*/

        //表单的形式进行数据发送
        $.ajax
        (
            {
                url: "/Test/addUser",//请求路径
                data: {username: username, password: password , avatar: avatar,createdate:createdate},//请求数据
                type: "POST",//请求方式
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {

                        userList(1, 5);//刷新列表
                        $("#myModal").modal("hide");//模态框隐藏
                    } else {
                        alert("添加失败！");
                    }
                }
            }
        )
    }
    //删除用户
    function del(ID)
    {


        $.ajax
        (
            {
                url: "/Test/deleteUser",//请求路径
                data: {id:ID},//请求数据
                type: "POST",//请求方式
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {
                        alert("删除成功！");
                        userList(1, 5);//刷新列表
                        $("#myModal").modal("hide");//模态框隐藏
                    } else {
                        alert("删除失败！");
                    }
                }
            }
        )
    }


    //修改名称怎么实现
    //每个小组设置相关项目表格，至少三个，每表格的字段至少五个以上
    //在此模板下，实现列表渲染，数据添加，数据删除，三个功能（9个以上）
    //

    //修改用户
    //1 显示修改的用户信息
    var index=0;//定义全局变量，保持下标

    function getUser(ID)
    {
       /*var users=localStorage.getItem("userList");//获取本地存储的数据
       users=JSON.parse(users);//把json格式字符串转成son数据
       $("#id2").val(users[ID].id);
       $("#username2").val(users[ID].username);
       $("#password2").val(users[ID].password);

       index=ID;*/

        $.ajax
        (
            {
                url: "/Test/getUserById",//请求路径
                data: {id:ID},//请求数据
                type: "GET",//请求方式 GET/POST/ PUT/DELETE
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {

                        $("#id2").val(data.data.id);
                        $("#username2").val(data.data.username);
                        $("#password2").val(data.data.password);
                        $("#avatar2").val(data.data.avatar);
                        $("#createdate2").val(data.data.createdate);

                        //图片渲染
                        $(".file-drop-zone-title").html('<img src="'+data.data.avatar+'" width="260">')

                    } else {
                        alert("查询失败！");
                    }
                }
            }
        )

    }

    function updateUser() {
        //获取修改之后的信息
        var id = $("#id2").val();
        var username = $("#username2").val();
        var password = $("#password2").val();
        var avatar = $("#avatar2").val();
        var createdate = $("#createdate2").val();

        //组装数据
        /*var obj = {};
        obj.id = id;
        obj.username = username;
        obj.password = password;*/

        $.ajax
        (
            {
                url: "/Test/updateUser",//请求路径
                data: {id:id,username:username,password:password,avatar:avatar,createdate:createdate},//请求数据
                type: "post",//请求方式 GET/POST/ PUT/DELETE
                //dataType: "json",//请求数据类型
                //contentType: "application/json",//返回数据类型
                success: function (data) {
                    console.log(data);
                    data = JSON.parse(data);//把后台的数据处理为json格式
                    if (data.code == "0000") {

                        userList(1, 5);//刷新列表
                        $("#myModal2").modal("hide");//模态框隐藏

                    } else {
                        alert("修改失败！");
                    }
                }
            }
        )

      }
</script>
</html>
